<template>
  <div class="records-query-page">
    <!-- Search Form -->
    <el-card class="search-card">
      <el-form :model="searchForm" inline class="search-form">
        <el-form-item label="警情编号">
          <el-input
            v-model="searchForm.id"
            placeholder="请输入警情编号"
            clearable
          />
        </el-form-item>
        <el-form-item label="处理时间">
          <el-date-picker
            v-model="searchForm.timeRange"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :shortcuts="dateShortcuts"
          />
        </el-form-item>
        <el-form-item label="警情类型">
          <el-select
            v-model="searchForm.type"
            placeholder="请选择警情类型"
            clearable
          >
            <el-option
              v-for="item in typeOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="处理状态">
          <el-select
            v-model="searchForm.status"
            placeholder="请选择处理状态"
            clearable
          >
            <el-option
              v-for="item in statusOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="处理人员">
          <el-input
            v-model="searchForm.handler"
            placeholder="请输入处理人员"
            clearable
          />
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            @click="handleSearch"
            :style="{ background: '#4834d4', borderColor: '#4834d4' }"
          >
            <el-icon><i-ep-Search /></el-icon>查询
          </el-button>
          <el-button @click="resetSearch">
            <el-icon><i-ep-Refresh /></el-icon>重置
          </el-button>
          <el-button type="success" @click="exportRecords">
            <el-icon><i-ep-Download /></el-icon>导出
          </el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <!-- Results Section -->
    <el-card class="results-card">
      <template #header>
        <div class="card-header">
          <div class="header-title">
            <span>处理记录列表</span>
            <el-tag type="info">共 {{ total }} 条记录</el-tag>
          </div>
          <div class="header-actions">
            <el-button-group>
              <el-button
                :type="viewMode === 'table' ? 'primary' : ''"
                @click="viewMode = 'table'"
              >
                <el-icon><i-ep-List /></el-icon>
              </el-button>
              <el-button
                :type="viewMode === 'timeline' ? 'primary' : ''"
                @click="viewMode = 'timeline'"
              >
                <el-icon><i-ep-Sort /></el-icon>
              </el-button>
            </el-button-group>
          </div>
        </div>
      </template>

      <!-- Table View -->
      <div v-show="viewMode === 'table'" class="table-view">
        <el-table
          :data="records"
          style="width: 100%"
          :default-sort="{ prop: 'time', order: 'descending' }"
        >
          <el-table-column prop="id" label="警情编号" width="180" />
          <el-table-column prop="type" label="警情类型" width="120">
            <template #default="{ row }">
              <el-tag :type="getTypeTagType(row.type)">{{ row.type }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="time" label="处理时间" width="180" sortable />
          <el-table-column prop="handler" label="处理人员" width="120" />
          <el-table-column prop="status" label="处理状态" width="120">
            <template #default="{ row }">
              <el-tag :type="getStatusTagType(row.status)">{{
                row.status
              }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column
            prop="description"
            label="处理描述"
            show-overflow-tooltip
          />
          <el-table-column label="附件" width="100">
            <template #default="{ row }">
              <el-button
                v-if="row.attachments?.length"
                type="primary"
                link
                @click="viewAttachments(row)"
              >
                查看({{ row.attachments.length }})
              </el-button>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="150" fixed="right">
            <template #default="{ row }">
              <el-button type="primary" link @click="viewDetail(row)"
                >详情</el-button
              >
              <el-button type="success" link @click="handleEdit(row)"
                >编辑</el-button
              >
            </template>
          </el-table-column>
        </el-table>

        <div class="pagination-container">
          <el-pagination
            v-model:current-page="currentPage"
            v-model:page-size="pageSize"
            :page-sizes="[10, 20, 50, 100]"
            :total="total"
            layout="total, sizes, prev, pager, next, jumper"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </div>

      <!-- Timeline View -->
      <div v-show="viewMode === 'timeline'" class="timeline-view">
        <el-timeline>
          <el-timeline-item
            v-for="record in records"
            :key="record.id"
            :type="getTimelineItemType(record.status)"
            :timestamp="record.time"
          >
            <el-card class="timeline-card">
              <template #header>
                <div class="timeline-header">
                  <div class="timeline-title">
                    <span class="id">{{ record.id }}</span>
                    <el-tag :type="getTypeTagType(record.type)" size="small">
                      {{ record.type }}
                    </el-tag>
                  </div>
                  <el-tag :type="getStatusTagType(record.status)" size="small">
                    {{ record.status }}
                  </el-tag>
                </div>
              </template>
              <div class="timeline-content">
                <p class="description">{{ record.description }}</p>
                <div class="handler">处理人：{{ record.handler }}</div>
                <div class="attachments" v-if="record.attachments?.length">
                  <div class="attachment-title">附件：</div>
                  <div class="attachment-list">
                    <el-image
                      v-for="(attachment, index) in record.attachments"
                      :key="index"
                      :src="attachment"
                      :preview-src-list="record.attachments"
                      fit="cover"
                      class="attachment-image"
                    />
                  </div>
                </div>
              </div>
            </el-card>
          </el-timeline-item>
        </el-timeline>
      </div>
    </el-card>

    <!-- Detail Dialog -->
    <el-dialog
      v-model="detailDialogVisible"
      title="处理记录详情"
      width="60%"
      class="detail-dialog"
    >
      <el-descriptions :column="2" border>
        <el-descriptions-item label="警情编号">{{
          currentRecord.id
        }}</el-descriptions-item>
        <el-descriptions-item label="警情类型">{{
          currentRecord.type
        }}</el-descriptions-item>
        <el-descriptions-item label="处理时间">{{
          currentRecord.time
        }}</el-descriptions-item>
        <el-descriptions-item label="处理人员">{{
          currentRecord.handler
        }}</el-descriptions-item>
        <el-descriptions-item label="处理状态">{{
          currentRecord.status
        }}</el-descriptions-item>
        <el-descriptions-item label="处理描述">{{
          currentRecord.description
        }}</el-descriptions-item>
      </el-descriptions>

      <div v-if="currentRecord.attachments?.length" class="detail-attachments">
        <div class="section-title">附件列表</div>
        <el-image
          v-for="(attachment, index) in currentRecord.attachments"
          :key="index"
          :src="attachment"
          :preview-src-list="currentRecord.attachments"
          fit="cover"
          class="detail-image"
        />
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
// Data
const searchForm = reactive({
  id: '',
  timeRange: '',
  type: '',
  status: '',
  handler: ''
})

const typeOptions = [
  { label: '火灾报警', value: 'fire' },
  { label: '治安报警', value: 'security' },
  { label: '交通事故', vlue: 'traffic' },
  { label: '医疗救助', value: 'medical' }
]

const statusOptions = [
  { label: '待处理', value: 'pending' },
  { label: '处理中', value: 'processing' },
  { label: '已完成', value: 'completed' },
  { label: '已关闭', value: 'closed' }
]

const dateShortcuts = [
  {
    text: '最近一周',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
      return [start, end]
    }
  },
  {
    text: '最近一月',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
      return [start, end]
    }
  },
  {
    text: '最近三月',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
      return [start, end]
    }
  }
]

const viewMode = ref('table')
const currentPage = ref(1)
const pageSize = ref(10)
const total = ref(100)
const detailDialogVisible = ref(false)
const currentRecord = ref({})

// Mock data
const records = ref([
  {
    id: 'AW20240209001',
    type: '火灾报警',
    time: '2024-02-09 10:30:45',
    handler: '张三',
    status: '已完成',
    description: '接到火灾报警，立即派出消防车前往现场处理...',
    attachments: ['/api/placeholder/100/75', '/api/placeholder/100/75']
  },
  {
    id: 'AW20240209002',
    type: '交通事故',
    time: '2024-02-09 11:15:30',
    handler: '李四',
    status: '处理中',
    description: '发生交通事故，已派出交警赶往现场...',
    attachments: ['/api/placeholder/100/75']
  }
])

// Methods
const handleSearch = () => {
  // Implement search logic
}

const resetSearch = () => {
  // Reset form
  Object.keys(searchForm).forEach((key) => {
    searchForm[key] = ''
  })
}

const exportRecords = () => {
  // Implement export logic
}

const handleSizeChange = (val) => {
  pageSize.value = val
  // Fetch data
}

const handleCurrentChange = (val) => {
  currentPage.value = val
  // Fetch data
}

const viewDetail = (row) => {
  currentRecord.value = row
  detailDialogVisible.value = true
}

const handleEdit = (row) => {
  // Implement edit logic
}

const viewAttachments = (row) => {
  // Implement attachments preview logic
}

const getTypeTagType = (type) => {
  const map = {
    火灾报警: 'danger',
    治安报警: 'warning',
    交通事故: 'info',
    医疗救助: 'success'
  }
  return map[type] || ''
}

const getStatusTagType = (status) => {
  const map = {
    待处理: 'info',
    处理中: 'warning',
    已完成: 'success',
    已关闭: ''
  }
  return map[status] || ''
}

const getTimelineItemType = (status) => {
  const map = {
    待处理: 'warning',
    处理中: 'primary',
    已完成: 'success',
    已关闭: 'info'
  }
  return map[status] || ''
}
</script>

<style lang="scss" scoped>
.records-query-page {
  .search-card {
    margin-bottom: 20px;

    .search-form {
      display: flex;
      flex-wrap: wrap;
      gap: 16px;
    }
  }

  .results-card {
    .card-header {
      display: flex;
      justify-content: space-between;
      align-items: center;

      .header-title {
        display: flex;
        align-items: center;
        gap: 12px;
      }
    }

    .table-view {
      .pagination-container {
        margin-top: 20px;
        display: flex;
        justify-content: flex-end;
      }
    }

    .timeline-view {
      padding: 20px;

      .timeline-card {
        .timeline-header {
          display: flex;
          justify-content: space-between;
          align-items: center;

          .timeline-title {
            display: flex;
            align-items: center;
            gap: 12px;

            .id {
              font-weight: bold;
            }
          }
        }

        .timeline-content {
          .description {
            margin: 12px 0;
            color: #666;
          }

          .handler {
            margin: 8px 0;
            font-size: 14px;
            color: #666;
          }

          .attachments {
            margin-top: 12px;

            .attachment-title {
              font-size: 14px;
              color: #666;
              margin-bottom: 8px;
            }

            .attachment-list {
              display: flex;
              gap: 8px;
              flex-wrap: wrap;

              .attachment-image {
                width: 100px;
                height: 75px;
                border-radius: 4px;
                cursor: pointer;
                transition: all 0.3s;

                &:hover {
                  transform: scale(1.05);
                }
              }
            }
          }
        }
      }
    }
  }

  .detail-dialog {
    .detail-attachments {
      margin-top: 24px;

      .section-title {
        font-size: 16px;
        font-weight: bold;
        margin-bottom: 16px;
        color: #333;
      }

      .detail-image {
        width: 160px;
        height: 120px;
        margin: 8px;
        border-radius: 8px;
        cursor: pointer;
        transition: all 0.3s;

        &:hover {
          transform: scale(1.05);
        }
      }
    }
  }
}

// Responsive design
@media screen and (max-width: 1400px) {
  .records-query-page {
    .search-form {
      .el-form-item {
        margin-right: 0;
        margin-bottom: 16px;
      }
    }
  }
}

@media screen and (max-width: 768px) {
  .records-query-page {
    .search-form {
      flex-direction: column;

      .el-form-item {
        width: 100%;
      }
    }

    .timeline-view {
      .timeline-card {
        .timeline-header {
          flex-direction: column;
          align-items: flex-start;
          gap: 8px;
        }
      }
    }
  }
}
</style>
